<script setup>
  import { ref, onMounted, computed } from 'vue'
  import { cateApi } from '@/apis/cate'

  // 左侧
  const classifyList = ref([])
  // 类名
  const activeIndex = ref(0)

  const subList = computed(() => classifyList.value[activeIndex.value]?.children || [])
  //获取数据
  onMounted(() => {
    getClassifyData()
  })
  async function getClassifyData() {
    const {
      data: { list },
      status,
      message
    } = await cateApi()
    if (status !== 200) uni.utils.toast(message)
    // console.log(list)
    classifyList.value = list
    // leftClassifyList.value = list.map((item) => {
    //   const { category_id, name, sort } = item
    //   return { category_id, name, sort }
    // })
    // rightClassifyList.value = list.map((item) => {
    //   const arr = item.children || []
    //   return arr
    // })
  }

  function onChange(index) {
    activeIndex.value = index
  }
</script>

<template>
  <view class="content">
    <!-- 搜索组件 -->
    <view class="top-search">
      <view class="top-search-text">搜索商品</view>
    </view>
    <!-- 商品分类 -->
    <view class="cate-content">
      <scroll-view scroll-y class="cate-left">
        <view class="item" @click="onChange(index)" :key="leftClassify.category_id" :class="{ active: index === activeIndex }" v-for="(leftClassify, index) in classifyList">
          {{ leftClassify.name }}
        </view>
      </scroll-view>
      <scroll-view scroll-y class="secondary">
        <view class="section">
          <view class="goods" v-for="goods in subList" :key="goods.category_id" hover-class="none">
            <image class="image" :src="goods.image.preview_url"></image>
            <view class="name">{{ goods.name }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss">
  scroll-view ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
  }
  .content {
    height: 100vh;
    //  #ifdef H5
    height: calc(100vh - 94px);
    //  #endif
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .top-search {
    width: 100%;
    height: 88rpx;
    padding: 9rpx, 9rpx, 14rpx;
    .top-search-text {
      background-color: #f2f2f2;
      text-align: center;
      height: 88rpx;
      line-height: 92rpx;
      color: #6d6d6d;
      border-radius: 50rpx;
    }
  }
  .cate-content {
    // height: 100%;
    // background-color: rebeccapurple;
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  .cate-right {
    // background-color: beige;
  }
  .cate-left {
    width: 200rpx;
    height: 100%;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 96rpx;
      font-size: 26rpx;
      color: #595c63;
      position: relative;
      background-color: #f8f8f8;
    }
    .active {
      background-color: #fff;
      color: #fa2209;
    }
  }
  /* 二级分类 */
  .secondary {
    background-color: #fff;
    .section {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx 0;

      .goods {
        width: 150rpx;
        margin: 0rpx 42rpx 20rpx 0;

        .image {
          width: 150rpx;
          height: 150rpx;
        }

        .name {
          padding: 5rpx;
          font-size: 22rpx;
          color: #333;
          text-align: center;
        }
      }
    }
  }
</style>
